<template><!--关键岗位学习地图-->
    <div style="height: 100%;">
        <navbar :title="$t('find_position_learning')"></navbar>
        <div class="content-noBottom" v-if="tabTypeList.length > 1">
            <div class="select-nav" ref="navLeft" :class="{'nav-left': isFixed}">
                <scroll-tab class="tab" :goIndex="goIndex">
                    <tab-item style="color:#999" v-for="item in tabTypeList" @on-item-click="onItemClick" :key="item.upcTitle">{{item.upcTitle ? item.upcTitle: $t('cos_other')}}</tab-item>
                </scroll-tab>
                <div class="nav-move" @click="scrollTabTip = true"></div>
            </div>
            <div style="height: calc(100% - 50px);">
                <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="">
                    <div v-bind:class="{'height100' : tabTypeList.length <= 1}">
                        <!-- banner图 -->
                        <div v-if="bannerList.length > 0">
                            <ul class="banner content-box">
                                <router-link tag="li" :to="item.url" v-for="(item, i) in bannerList" :key="i" :style="{'backgroundImage':`url('${item.img}')`}" >
                                    <div>
                                        <span class="word-clamp-2 font-size12">{{item.title}}</span>
                                    </div>
                                </router-link>
                            </ul>
                        </div>
                        <!-- 内容 -->
                        <div :class="{'height100' : tabTypeList.length <= 1}" :style="{'padding-top': bannerList.length > 0 ? '31px' : '0'}">
                            <template v-if="keyPositionList && goIndex === 0">
                            <div class="list-type" v-for="(v,i) in keyPositionList.positionList" :key="i"  ref="stopPosition">
                                <div class="title">
                                    <p>{{v.upcTitle ? v.upcTitle: $t('cos_other')}} <span class="font-size14 color999">({{v.positionList.length || 0}})</span></p>
                                    <span class="color999 font-size12 vc" @click="selectType(i+1)">{{$t('see_more')}}<van-icon name="arrow" /></span>
                                </div>
                                <ul class="clearfix">
                                    <router-link tag="li" :to="`/keyPositionDetail/${item.uptId}`" v-for="(item, index) in v.positionList" :key="index">
                                        <span>{{item.uptTitle}}</span>
                                        <span class="font-size12"><label style="color:#075ebb">{{ item.itmCount || 0 }}</label> {{ item.itmCount > 1 ? $t("position_learning_course_num_2") : $t("position_learning_course_num") }}</span><!--门课程-->
                                    </router-link>
                                </ul>
                            </div>
                            </template>
                            <div class="list-type" v-else-if="keyPositionList && goIndex !== 0" ref="stopPosition">
                                <div>{{keyPositionList.upcTitle ? keyPositionList.upcTitle: $t('cos_other')}} <span class="font-size14 color999">({{ curPositionList || 0}})</span></div>
                                <ul>
                                    <router-link tag="li" :to="`/keyPositionDetail/${item.uptId}`" v-for="(item, index) in keyPositionList.positionList" :key="index">
                                        <span>{{item.uptTitle}}</span>
                                        <span class="font-size12"><label style="color:#075ebb">{{ item.itmCount || 0 }}</label> {{ item.itmCount > 1 ? $t("position_learning_course_num_2") : $t("position_learning_course_num") }}</span><!--门课程-->
                                    </router-link>
                                </ul>
                            </div>
                        </div>
                    </div>
                </van-pull-refresh>
            </div>
        </div>
        <!--暂无数据-->
        <div v-if="!isLoading && tabTypeList.length <= 1" style="height:100%;">
            <div class="box-table" style="width:100%;height:100%;">
                <div class="box-table-cell" style="text-align: center;">
                    <div class="no-data">
                        <img src="../../../static/images/no-data.png" alt=""/>
                        <p class="color999">{{ $t('no_data') }}</p>
                    </div>
                </div>
            </div>
        </div>
        <common-loading :isLoading="isLoading"></common-loading>
        <!--tip-->
        <div class="scroll-tab-tip"  v-show="scrollTabTip">
            <div class="tab-content"><!--岗位类型-->
                <span style="font-size: 16px;">
                    {{ $t('position_learning_job_type') }}
                    <em @click="scrollTabTip = false"></em>
                </span>
                <ul>
                    <li :class="{'cur': goIndex == index}" v-for="(item, index) in tabTypeList" :key="index" @click="selectType(index)">
                        {{item.upcTitle ? item.upcTitle: $t('cos_other')}}
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import {scrollTab, tabItem} from '@/repeatComponents/scrollTab/index';
import { Icon } from 'vant';
export default {
    name: 'KeyPosition',
    components: { scrollTab, tabItem, [Icon.name]: Icon },
    data() {
        return {
            bannerList: [],
            bannerIndex: 0,
            tabTypeList: [],
            keyPositionList: [],
            scrollTabTip: false,
            goIndex: 0,
            isTop: false,
            isFixed: false,
            isLoading: true,
            curPositionList: 0, // 当前职位数量
            isRefresh: false
        };
    },
    methods: {
        init() {
            this.getBanner();
            this.getTabType();
        },
        onScroll(top) { //页面滚动条
            if (top >= this.$refs.navLeft.offsetTop - 110) {
                this.isFixed = true;
            }
            if (top <= this.$refs.stopPosition.offsetTop - 110) {
                if (this.$refs.navLeft.offsetTop === 112) {
                    this.isFixed = false;
                }
            }
        },
        onPulldownTop() {
            this.isRefresh = true;
            setTimeout(() => {
                this.$axios.all([this.getBanner(), this.getTabType()]).then(this.$axios.spread((acct, perms) => {
                    this.isRefresh = false;
                }));
            }, 900);
        },
        onIndexChange(index) {
            this.bannerIndex = index;
        },
        selectType(index) {
            this.goIndex = index;
            this.scrollTabTip = false;
            this.keyPositionList = this.tabTypeList[index];
            this.curPositionList = this.tabTypeList[index].positionList.length;
        },
        onItemClick(index) {
            this.goIndex = index;
            this.keyPositionList = this.tabTypeList[index];
            //
            this.curPositionList = this.tabTypeList[index].positionList.length;
        },
        getBanner() {
            this.$axios({
                method: 'GET',
                url: '/app/api/position-map/detail'
            }).then(res => {
                let arr = [];
                for (var i = 0; i < res.data.positionMaps.length; i++) {
                    if (i > 5) {
                        continue;
                    }
                    arr.push({
                        img: this.appUrl + res.data.positionMaps[i].upmImg.replace('\\', '/'),
                        title: res.data.positionMaps[i].uptTitle,
                        url: `/keyPositionDetail/${res.data.positionMaps[i].uptId}`,
                        index: i
                    });
                    this.bannerList = arr;/*/keyPositionDetail/${item.upt_id}*/
                    //
                    this.isLoading = false;
                }
            });
        },
        getTabType() {
            this.$axios({
                method: 'GET',
                url: '/app/api/position-map/catalog/list'
            }).then(res => {
                if (res.data) {
                    this.tabTypeList = [{upcTitle: this.$t('type_all_title'), positionList: [...res.data], upcId: 0}, ...res.data];
                }
                this.isLoading = false;
            });
        }
    },
    mounted() {
        this.$store.commit('addKeepAliveList', 'KeyPosition');
        this.init();
    },
    activated() {
        this.getTabType();
    }
};
</script>

<style scoped lang="less">
// 公共滑动盒子
.content-box{
    display: -webkit-box;
    overflow-x: scroll;
    -webkit-overflow-scrolling:touch;
    &::-webkit-scrollbar { /**chrome、safari */
        display: none;
    }
    scrollbar-width: none; /**火狐 */
    -ms-overflow-style: none; /**IE10+ */
    li{
        width: 200px!important;
        height: 80px!important;
    }
}
.banner{
    margin-top: 25px;
    padding: 0 15px;
    li{
        width: 135px;
        height: 82px;
        margin-right: 3%;
        border-radius: 3px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        div {
            width: 100%;
            height: 100%;
            background: rgba(34,24,21,.2);
            position: relative;
            border-radius: 3px;
            span{
                position: absolute;
                color: #fff;
                left: 10px;
                bottom: 10px;
            }
        }
    }
}
.list-type{
    padding: 0 15px 30px;
    .title{
        display: flex;
        justify-content: space-between;
        .vc{
            display: flex;
            align-items: center;
        }
    }
    div{
        font-size: 16px;
    }
    ul{
        li{
            float: left;
            height: 55px;
            padding: 10px 15px;
            background: #fff;
            border-radius: 8px;
            margin-right: 10px;
            margin-top: 15px;
            width: 108px;
            span{
                display: block;
                height: 50%;
                align-items: center;
                max-width: 130px;
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
                &:last-child{
                    color: #999999;
                }
            }
        }
    }
}
.select-nav {
    overflow: hidden;
    .tab {
        width: 80%;
        float: left;
    }
    .nav-move {
        width: 20%;
        float: left;
        height: 50px;
        background: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        &:before {
            content: '';
            display: block;
            background: url(./images/icon1.png) no-repeat 0 -4px;
            width: 16px;
            height: 13px;
            background-size: 16px;
        }
    }
}
.scroll-tab-tip{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    position: fixed;
    z-index: 101;
    top: 0;
    span{
        display: block;
        padding: 25px;
        font-size: 18px;
        font-weight: bold;
        box-sizing: border-box;
        position: relative;
        em{
            display: block;
            width: 12px;
            height: 12px;
            background: url(../../../static/images/icon-03.png) no-repeat 0 -19px;
            background-size: 12px;
            position: absolute;
            top: 50%;
            right: 25px;
            margin-top: -6px;
        }
    }
    div{
        width: 90%;
        display: table;
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #ffffff;
        max-height: 485px;
        min-height: 256px;
        border-radius: 8px;
        box-sizing: border-box;
        ul{
            overflow: hidden;
            padding: 0 25px 25px;
            max-height: 417px;
            min-height: 256px;
            overflow-y: auto;
            box-sizing: border-box;
            li{
                padding: 10px 15px;
                float: left;
                background: #e6e6e6;
                margin: 10px 13px 10px 0;
                border-radius: 8px;
                max-width: 160px;
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
                &.cur{
                    background: #075ebb;
                    color: #ffffff;
                }
            }
        }
    }
}
</style>
